<template>
	<view class="content">
		<u-navbar title="企业认证" :custom-back="handleToBack"></u-navbar>
		<view v-if="data.formData.audit == 0">
			<view class="u-flex content_tip">
				<u-icon name="info-circle-fill" color="#FF0000"></u-icon>
				<view class="u-m-l-10">
					根据相关法律法规要求，企业认证需要上传以下资料
				</view>
			</view>

			<view class="content_main">
				<u-form :model="data.formData" :error-type="['toast']" ref="form1">
					<u-form-item required label="企业名称" prop="companyname" label-position="top">
						<u-input v-model="data.formData.companyname" placeholder="请输入企业名称" disabled />
					</u-form-item>
					<u-form-item required label="营业执照" prop="license" label-position="top">
						<u-upload :fileList="data.license_img" :action="data.action" :header="data.header"
							@on-success="licenseSuccess" @on-remove="licenseRemove" :max-count="1" :width="160"
							:height="160">
						</u-upload>
					</u-form-item>
					<u-form-item required label="经办人身份证" label-position="top">
						<view class="u-flex">
							<u-form-item prop="legal_person_idcard_front">
								<u-upload :custom-btn="true" :fileList="data.legal_person_idcard_front_img"
									:action="data.action" :header="data.header" @on-success="frontSuccess"
									@on-remove="frontRemove" :max-count="1" :width="260" :height="260">
									<template v-slot:addBtn>
										<u-image src="/pages/pagesPersonal/static/front.png" :width="260"
											mode="widthFix"></u-image>
									</template>
								</u-upload>
							</u-form-item>
							<u-form-item class="u-m-l-64" prop="legal_person_idcard_back">
								<u-upload :custom-btn="true" :fileList="data.legal_person_idcard_back_img"
									:action="data.action" :header="data.header" @on-success="backSuccess"
									@on-remove="backRemove" :max-count="1" :width="260" :height="260">
									<template v-slot:addBtn>
										<u-image src="/pages/pagesPersonal/static/back.png" :width="260"
											mode="widthFix"></u-image>
									</template>
								</u-upload>
							</u-form-item>
						</view>
					</u-form-item>
					<u-form-item required label="委托书（函）" prop="proxy" label-position="top">
						<u-upload :fileList="data.proxy_img" :action="data.action" :header="data.header"
							@on-success="proxySuccess" @on-remove="proxyRemove" :max-count="1" :width="160"
							:height="160">
						</u-upload>
					</u-form-item>
				</u-form>
			</view>

			<u-bottom-button confirmText="提交" @confirm="submit"></u-bottom-button>
		</view>
		<view v-else>
			<view v-if="data.formData.audit == 1" class="content_item">
				<u-image src="/pages/pagesPersonal/static/success.png" :width="240" mode="widthFix"></u-image>
				<view class="content_item_txt">
					认证成功
				</view>
			</view>
			<view v-if="data.formData.audit == 2" class="content_item">
				<u-image src="/pages/pagesPersonal/static/fail.png" :width="240" mode="widthFix"></u-image>
				<view class="content_item_txt">
					认证失败：{{data.formData.audit_reason || data.formData.audit_text}}，请<text
						@click="handleToAuth">重新认证</text>
				</view>
			</view>
			<view v-if="data.formData.audit == 3" class="content_item">
				<u-image src="/pages/pagesPersonal/static/loading.png" :width="240" mode="widthFix"></u-image>
				<view class="content_item_txt">
					认证中，请等待...
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		nextTick
	} from "vue";
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import development from '/config/development'
	import production from '/config/productions'
	const host = process.env.NODE_ENV === 'development' ? development.host : production.host;
	const form1 = ref();
	const data = reactive({
		action: host + '/v1_0/member/upload/index',
		header: {
			"user-token": uni.getStorageSync('token')
		},
		license_img: [],
		legal_person_idcard_back_img: [],
		legal_person_idcard_front_img: [],
		proxy_img: [],
		formData: {
			audit: 0,
			companyname: '',
			legal_person_idcard_back: "",
			legal_person_idcard_back_img: "",
			legal_person_idcard_front: "",
			legal_person_idcard_front_img: "",
			license: "",
			license_img: "",
			proxy: "",
			proxy_img: ""
		},
		rules: {
			companyname: [{
				required: true,
				message: '请输入企业名称',
				trigger: 'change',
			}],
			license: [{
				required: true,
				message: '请上传营业执照照片',
				trigger: 'change',
			}],
			legal_person_idcard_front: [{
				required: true,
				message: '请上传经办人身份证正面照',
				trigger: 'change',
			}],
			legal_person_idcard_back: [{
				required: true,
				message: '请上传经办人身份证背面照',
				trigger: 'change',
			}],
			proxy: [{
				required: true,
				message: '请上传委托书(函)',
				trigger: 'change',
			}]
		}
	});
	onLoad(() => {
		getCompanyAuthinfo()
	})
	// 重新认证
	const handleToAuth = () => {
		data.formData.audit = 0
		setTimeout(() => {
			form1.value.setRules(data.rules)
		}, 20)
	}
	// 返回上一页
	const handleToBack = () => {
		var pages = getCurrentPages();
		var page = pages[pages.length - 2];
		if (page == undefined) {
			uni.$u.route({
				type: 'tab',
				url: '/pages/home/home'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
	}
	// 删除正面身份证
	const frontRemove = () => {
		data.legal_person_idcard_front_img = []
		data.formData.legal_person_idcard_front = ''
		data.formData.legal_person_idcard_front_img = ''
	}
	// 上传正面身份证
	const frontSuccess = (res) => {
		if (res.code == 200) {
			data.formData.legal_person_idcard_front = res.data.file_id
			data.formData.legal_person_idcard_front_img = res.data.file_url
			uni.$u.toast('上传成功')
		}
	}
	// 删除背面身份证
	const backRemove = () => {
		data.legal_person_idcard_back_img = []
		data.formData.legal_person_idcard_back = ''
		data.formData.legal_person_idcard_back_img = ''
	}
	// 上传背面身份证
	const backSuccess = (res) => {
		if (res.code == 200) {
			data.formData.legal_person_idcard_back = res.data.file_id
			data.formData.legal_person_idcard_back_img = res.data.file_url
			uni.$u.toast('上传成功')
		}
	}
	// 删除委托书
	const proxyRemove = () => {
		data.proxy_img = []
		data.formData.proxy = ''
		data.formData.proxy_img = ''
	}
	// 上传委托书
	const proxySuccess = (res) => {
		if (res.code == 200) {
			data.formData.proxy = res.data.file_id
			data.formData.proxy_img = res.data.file_url
			uni.$u.toast('上传成功')
		}
	}
	// 删除营业执照
	const licenseRemove = () => {
		data.license_img = []
		data.formData.license = ''
		data.formData.license_img = ''
	}
	// 上传营业执照
	const licenseSuccess = (res) => {
		if (res.code == 200) {
			data.formData.license = res.data.file_id
			data.formData.license_img = res.data.file_url
			uni.$u.toast('上传成功')
		}
	}
	// 获取企业认证信息
	const getCompanyAuthinfo = async () => {
		data.formData = await uni.$u.api.company_authinfo()
		if (data.formData.audit == 0) {
			form1.value.setRules(data.rules)
			return
		}
		data.license_img = [{
			url: data.formData.license_img
		}]
		data.proxy_img = [{
			url: data.formData.proxy_img
		}]
		data.legal_person_idcard_back_img = [{
			url: data.formData.legal_person_idcard_back_img
		}]
		data.legal_person_idcard_front_img = [{
			url: data.formData.legal_person_idcard_front_img
		}]
	}
	// 提交企业认证
	const submit = () => {
		form1.value.validate(async valid => {
			// #ifdef MP-WEIXIN
			if (uni.$u.test.isEmpty(data.formData.license)) return uni.$u.toast('请上传营业执照照片')
			if (uni.$u.test.isEmpty(data.formData.legal_person_idcard_front)) return uni.$u.toast('请上传经办人身份证正面照')
			if (uni.$u.test.isEmpty(data.formData.legal_person_idcard_back)) return uni.$u.toast('请上传经办人身份证背面照')
			if (uni.$u.test.isEmpty(data.formData.proxy)) return uni.$u.toast('请上传委托书(函)')
			let res = await uni.$u.api.company_auth_license(data.formData)
			uni.$u.toast('提交认证成功')
			setTimeout(() => {
				getCompanyAuthinfo()
			}, 1000)
			// #endif
			// #ifndef MP-WEIXIN
			if (valid) {
				let res = await uni.$u.api.company_auth_license(data.formData)
				uni.$u.toast('提交认证成功')
				setTimeout(() => {
					getCompanyAuthinfo()
				}, 1000)
			}
			// #endif
		});
	}
</script>

<style lang="scss" scoped>
	.content {
		&_tip {
			background-color: #fff7f2;
			color: #FF0000;
			font-size: 24rpx;
			padding: 20rpx;
		}

		&_main {
			padding: 0 32rpx;
			padding-bottom: 150rpx;
		}


		&_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #101010;
			font-size: 36rx;
			text-align: left;
			font-family: SourceHanSansSC-medium;
			font-weight: bold;
			margin: 0 auto;
			width: 320rpx;
			padding-top: 50%;

			&_txt {
				margin-top: 20rpx;
			}

			text {
				color: #00D075
			}
		}
	}
</style>